<template>
    <div class="return-top" :class="isBlogger ? 'update-return-top' : ''" @click.stop="onUpdate">
        <div class="transBtn">
            <div class="transBtn-child transBtn-top"></div>
            <div class="transBtn-child transBtn-middle"></div>
            <div class="transBtn-child transBtn-bottom"></div>
        </div>
    </div>
    
</template>

<script>
export default {
    props: {
        isBlogger: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            isClick: false,
        }
    },
    watch: {
        isBlogger (newVal) {
            if(!newVal) {
                this.$emit('update:isBlogger', false);
            }
        }
    },
    methods: {
        onUpdate() {
             if(this.isBlogger) {
                this.$emit('update:isBlogger', false);
            } else {
                this.$emit('update:isBlogger', true);
            }
        },
    },
}
</script>

<style scoped>
.return-top {
    position: relative;
    width: 14px;
    height: 14px;
    padding: 5px;
    cursor: pointer;
    background: #111;
    line-height: 0;
}
.transBtn {
    text-align: right;
}

/* 箭头过度 */

/* .return-top:hover .transBtn  .transBtn-top{
    transform: translateY(2px) rotate(-45deg);
    width: 50%;
}

.return-top:hover .transBtn  .transBtn-bottom{
    transform: translateY(-2px) rotate(45deg);
    width: 50%;
} */

.return-top:hover .transBtn  .transBtn-top{
    transform: translateY(2px) rotate(45deg);
    width: 50%;
}

.return-top:hover .transBtn  .transBtn-bottom{
    transform: translateY(-2px) rotate(-45deg);
    width: 50%;
}



/* x过度 */

/* .return-top:hover .transBtn  .transBtn-top{
    transform: translateY(5px) rotate(-45deg);
    width: 100%;
}

.return-top:hover .transBtn  .transBtn-middle{
    opacity: 0;
}

.return-top:hover .transBtn  .transBtn-bottom{
    transform: translateY(-5px) rotate(45deg);
    width: 100%;
} */

.update-return-top.update-return-top .transBtn  .transBtn-top{
    transform: translateY(5px) rotate(45deg);
    width: 100%;
}
.update-return-top.update-return-top .transBtn  .transBtn-middle{
    opacity: 0;
}
.update-return-top.update-return-top .transBtn  .transBtn-bottom{
    transform: translateY(-5px) rotate(-45deg);
    width: 100%;
}


.transBtn .transBtn-child {
    display: inline-block;
    margin-top: 3px;
    width: 15px;
    height: 2px;
    /* background-color: #fff; */
    background-color: #fc6423;
    vertical-align: top;
    transition: all .5s;
}

.transBtn-top {
    margin-top: 0!important;
}
</style>
